<template>
  <div id="app" class="app">
    <div class="headers_router">
      <headers></headers>
    </div>

    <div class="box">
      <div class="slide">
        <slide></slide>
      </div>
      <div class="routers">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import headers from "./components/header";
import slide from "./components/slide";
export default {
  components: { headers, slide },
};
</script>

<style lang="less">
.box{display: flex; //弹性盒模型布局
   .routers {
      // margin: 20px;
      width: calc(100vw );
      //  z-index: 1;
   
       
    }
}
.app {
  // overflow-x: hidden;
  // justify-content: left; //。app里面所有内容居左
  .slide {
    width: 200px;
    height: 100vh;
    overflow: hidden;
    z-index: 2;
  }
  .headers_router {
    flex: 1;
    z-index: 2;
  }
}
</style>
